
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
     .box{
        width: 1200px;
        height: 600px;
        display: flex;
        margin: 50px auto;

        

     }

     .left{
        width: 800px;
        height: 600px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

     }
     .right{
        width: 400px;
        height: 600px;
        background-color: pink;
        margin-left: 30px;
     }
     .box1{
        width: 24%;
            height: 290px;
            background-color:aliceblue;
            border: 2px solid yellow;
            margin-top: 5px;
       
     }
     .box1 img{
        width: 180px;
        height: 210px;
     }
     button{
        background-color: red;
     }
     .gowuche{
        display: flex;
        margin-top: 40px;
     }
     .gowuche .picture  img{
        width: 120px;
       height: 88px;
     }
     .gowuche .picture  p{
        margin-top: -40px;
     }

     
     .gowuche  p{
        width: 120px;
        height: 88px;
        text-align: center;
        line-height: 88px;
     }
     .gowuche input{
        margin-top: 40px;
     }
     .gowuche span{
       line-height: 44px;
     }

     
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <!-- <div class="box1">
                <img src="./img/1.png" alt="">
                <div class="wenzi">
                    <p> 按摩椅</p>
                    <p>100</p>
                    <button>加入购物车</button>
                </div>
            </div> -->
        </div>
        <div class="right">
            <h1>购物车(2)</h1>
            <!-- <div class="gowuche">
                <input type="checkbox" >
                <div class="picture">
                    <img src="./img/1.png" alt="">
                    <p>按摩椅</p>
                </div>
                
                <p>100</p>
                <p>10</p>
                <span>删除收藏</span>
            </div> -->
           
        </div>
    </div>


</body>

</html>
<script>
   
    //商品列表数据
    let goodlist = [{
        pic: "./img/1.png", name: "高级办公椅", money: "1000"
    }, { pic: "./img/2.png", name: "手机", money: "2000" }, { pic: "./img/3.png", name: "高级办公椅", money: "3000" }, { pic: "./img/4.png", name: "高级办公椅", money: "4000" }, { pic: "./img/5.png", name: "高级办公椅", money: "100" }, { pic: "./img/6.png", name: "高级办公椅", money: "5000" }, { pic: "./img/7.png", name: "高级办公椅", money: "6000" }, { pic: "./img/8.png", name: "高级办公椅", money: "7000" },]
     //购物车数据
  var  shulist={list:[]}
//渲染商品列表
    function render(){
        let oleft=document.querySelector('.left')
        console.log(oleft);
        oleft.innerHTML=goodlist.map((item)=>{
            return `<div class="box1">
                <img src="${item.pic}" alt="">
                <div class="wemzi">
                    <p>${item.name}</p>
                    <p>${item.money}</p>
                    <button>加入购物车</button>
                    
                </div>
                </div>`
        }).join('')

    }
     //购物车
    
    
    render();
    
    //添加点击事件
    
        var oleft=document.querySelector('.left')
    oleft.onclick=function(e){
        console.log(111);
        if(e.target.tagName=='BUTTON'){
            var  btns=[...document.querySelectorAll('button')]
            var  index=btns.findIndex((item)=>{
                return item==e.target
            })
            shulist.list.push(goodlist[index])
            renderGouche()
        }
    }

    function renderGouche(){
        let oright=document.querySelector('.right')
        console.log(oright);
        oright.innerHTML=shulist.list.map((item)=>{
            return `<div class="gowuche">
                <input type="checkbox" >
                <div class="picture">
                <img src="${item.pic}" alt="">  
                <p>${item.name}</p>
                </div>
                <p>${item.money}</p>
                <p>1</p>
                <span>删除收藏</span>
            </div>`
            
        }).join('')
    }
   

   



</script>